<template>
    <div class="myworld">
        <div class="myworld-heard">
          <div class="myworld-touxiang">
            <img src="/src/assets/touxiang1.jpg" alt="" class="yilou-touxiang">
          </div>
          <div class="myworld-name">
            <h1>蜡笔小新</h1>
          </div>
        </div>
        <div class="myworld-geren">
            <img src="/src/assets/gerenxin.png" alt="">
            <h3>个人信息</h3>
        </div>
        <div class="login-navigation">
          <div class="login-navigation-bottombar">
            <div class="login-navigation-bottombar-logo">
              <router-link to="/">
                <img src="/src/assets/dianpuxin.png" alt="" height="18px" width="25px">
                <p>首页</p>
             </router-link> 
            </div>
        <div class="login-navigation-bottombar-logo">
          <img src="/src/assets/xingqiuxin.png" alt="" height="18px" width="25px">
          <p>动态</p>
        </div>
        <div class="login-navigation-bottombar-logo">
          <img src="/src/assets/lingdangxin.png" alt="" height="18px" width="25px">
          <p>消息</p>
        </div>
        <div class="login-navigation-bottombar-logo">
          <img src="/src/assets/huiyuanxin.png" alt="" height="18px" width="25px">
          <p>会员</p>
        </div>
        <div class="login-navigation-bottombar-logo">
          <router-link to="/myworld">
             <img src="/src/assets/gerenxin.png" alt="" height="18px" width="25px">
             <p>我的</p>
           </router-link>
        </div>
       </div>
       </div>
    </div>
</template>
<style>
@media(max-width:767px){
    .myworld{
      font-size:14px;
      padding: 10px;
    }
  }
.myworld {
    height: 80vh;
    width: 40vh;
    background-color:white;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: space-around;
  }
.myworld-name{
    position: absolute;
    top: 18vh;
    left: 20vh;
}
.myworld-touxiang{
    text-align: center;
    position:absolute;
    top: 12vh;
  }
  .myworld-touxiang img{
  max-width: 100%; /* 确保图片不超出容器宽度 */
  }
  .myworld-touxiang p{
    margin: 0;
  }
  .yilou-touxiang{
    height: 15vh;
    width: 15vh;
    border-radius: 50%;
  }
.myworld-geren{
    height: 10vh;
    width: 39.9vh;
    position: absolute;
    top: 30vh;
    left: 3vh;
    background-color: green;
}
.myworld-geren img{
    height: 8vh;
    width: 8vh;
}
.myworld-geren h3{
    position: absolute;
    top: 3vh;
    left: 10vh;
}
.login-navigation-bottombar{
    display: flex;
    justify-content: space-around;
    height: 5vh;
    width: 39.9vh;
   background-color: white;
   position: absolute;
   top: 86.2vh;
   left: 2.9vh;
  }
  .login-navigation-bottombar-logo{
  text-align: center;
}
.login-navigation-bottombar-logo img{
  display: block; /* 将图片转换为块级元素，使其独占一行 */
  margin: 0 auto; /* 水平居中图片 */
  max-width: 100%; /* 确保图片不超出容器宽度 */
}
.login-navigation-bottombar-logo p{
  margin-top: none; /* 设置文字与图片之间的间距 */
}
</style>